import { useState, useImperativeHandle } from 'react'
import { Modal, Form, Input, TreeSelect, message, Select } from 'antd'
import { getAllUserInfoAPI, addDeptAPI, editDeptAPI } from '../../api/deptListApi'

import {
  TypeDeptListAPI,
  TypeAllUserInfoAPI,
  TypeAddDeptAPI,
  TypeEditDeptAPI
} from '../../type/api'
interface Props {
  //父组件给的ref，我自子组件通过这个ref给父组件暴露方法
  mref: React.MutableRefObject<
     {
        showModal: (type: string, data?: string | TypeDeptListAPI) => void
      }
    | undefined
  >
  //父组件给的获取部门列表的方法
  getDeptListFn: () => void
  //父组件给的部门列表数据
  deptList: TypeDeptListAPI[]
}

function CreateDept(props: Props) {
  //存储父组件传来的添加编辑状态
  const [type, setType] = useState<string>('create')

  //获取表单实例
  const [form] = Form.useForm()
  //控制组件显示隐藏的状态
  const [isModalOpen, setIsModalOpen] = useState(false)
  //控制组件显示隐藏的方法(同时也暴露给父组件)
  const showModal = (type: string, data?: string | TypeDeptListAPI) => {
    resetForm()
    setIsModalOpen(true)

    getAllUserInfoFn()
    if (Object.prototype.toString.call(data) === '[object Object]') {
      setType('edit')
      //这里通过给Form的Item设置初始值，就是表单value赋值，从而表单自动根据value显示label的值渲染
      form.setFieldsValue(
        // record.parentId, record.deptName, record.userName,_id
        data
      )
    } else {
      form.setFieldsValue(
        {
          parentId: data
        }
        // record.parentId, record.deptName, record.userName
      )
    }
  }
  //暴露给父组件的方法
  useImperativeHandle(
    props.mref,
    () => {
      return {
        // ... 你的方法 ...
        showModal
      }
    },
    []
  )
  // 控制组件提交方法
  const handleOk = async () => {
    const isOk = await form.validateFields()
    if (!isOk) {
      return
    }
    setIsModalOpen(false)
    if (type === 'create') {
      onFinish()
      message.success('添加成功')
    }
    if (type === 'edit') {
      await editDeptAPI(form.getFieldsValue(true))
      message.success('编辑成功')
    }

    props.getDeptListFn()
  }

  //重置表单的方法
  function resetForm() {
    form.resetFields()
  }

  // 控制组件显示隐藏的方法
  const handleCancel = () => {
    setIsModalOpen(false)
  }

  const [userInfoList, setUserInfoList] = useState<TypeAllUserInfoAPI[]>([])
  //不用这个配合组件的value存储选择的数据是因为form的实例可以拿到对应的数据，
  // 不需要用这个组件的value来存储选择的数据

  // //存储选择的父级部门的数据
  // const [value, setValue] = useState<string>('')
  // const [valueUser, setValueUser] = useState<string>('')

  //表单提交的方法
  function onFinish() {
    //获取表单数据
    const obj = form.getFieldsValue(true)

    const box = {
      deptName: obj.deptName,
      parentId: obj.parentId,
      userName: obj.userName
    }
    //调用添加部门的API
    addDeptFn(box)
  }

  //添加部门的方法
  async function addDeptFn(obj: TypeAddDeptAPI) {
    await addDeptAPI(obj)
  }
  //获取所有用户信息的方法
  async function getAllUserInfoFn() {
    const res = await getAllUserInfoAPI()
    setUserInfoList(res)
  }
  return (
    <>
      <Modal title='添加部门' open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          name='basic'
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item name='_id' hidden>
            <Input></Input>
          </Form.Item>
          <Form.Item
            hasFeedback
            rules={[{ required: true, message: '必选项' }]}
            name='parentId'
            label='上级部门'
          >
            <TreeSelect
              fieldNames={{
                label: 'deptName',
                value: 'parentId',
                children: 'children'
              }}
              style={{ width: '100%' }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              treeData={props.deptList}
              placeholder='点击选择上级部门'
              treeDefaultExpandAll
            />
          </Form.Item>
          <Form.Item
            hasFeedback
            rules={[{ required: true, message: '必选项' }]}
            name='deptName'
            label='部门名称'
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            hasFeedback
            rules={[{ required: true, message: '必选项' }]}
            name='userName'
            label='负责人'
          >
            <Select
              placeholder='点击选择上级部门'
              style={{ width: '100%' }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              options={userInfoList.map(item => {
                return {
                  label: item.userName,
                  value: item.userName
                }
              })}
            />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}

export default CreateDept
